Props 與 Computed 是開發元件最常使用的屬性，下面的範例是一個運用 Props 與 Computed 的簡單例子。

import { ref, computed } from 'vue'

const Component = {
  template: `
    <div>
      <input data-test="password" v-model="password">
      <p v-if="showError && isError" data-test="errorMsg">Password must be at least {{minLength}} characters.</p>
    </div>
  `,
  props: {
    minLength: {
      type: Number,
      required: true
    },
    showError: {
      type: Boolean,
      default: true
    }
  },
  setup (props) {
    const password = ref('')
    const isError = computed(() => password.value.length < props.minLength)

    return {
      isError,
      password
    }
  }
}

元件中有一個輸入框可以輸入密碼，而密碼會有一個最短的長度限制 (minLength)，預設的情況下，如果短於長度限制會出現錯誤訊息，不過如果將 showError 設為 false 時，則不會出現錯誤訊息。

要測試這個元件是否正常，我們應該驗證三種情況是否正確運行：

• Case 1: 密碼在大於或等於最短長度限制時，不會出現錯誤訊息。
• Case 2: 密碼少於最短長度限制時，出現錯誤訊息。
• Case 3: 密碼少於最短長度限制時，出現錯誤訊息，接著將 showError 為 false ，則不顯示錯誤訊息。

由於這三個 case 使用到的觀念與語法有非常多都是前面的文章介紹過的，所以今天我就不一個 case 一個 case 分開講解，直接附上完整的程式碼，也順帶介紹一個實用的語法 beforeEach()。

如果沒有看過前面幾篇的朋友，建議可以先去看 Conditional rendering & Elements visibility 與 Form Elements Handling，會幫助你更了解以下的程式碼。

describe('Props & Computed', () => {
  let wrapper
  const minLength = 6
  beforeEach(() => {
    wrapper = mount(Component, {
      props: {
        minLength
      }
    })
  })
  
  // Case 1: 密碼在大於或等於最短長度限制時，不會出現錯誤訊息。
  test(`not renders an error if length is more than or equal to ${minLength}`, async () => {
    await wrapper.get('[data-test="password"]').setValue('123456')

    expect(wrapper.find('[data-test="errorMsg"]').exists()).toBe(false)
  })

  // Case 2: 密碼少於最短長度限制時，出現錯誤訊息。
  test(`renders an error if length is less than ${minLength}`, async () => {
    await wrapper.get('[data-test="password"]').setValue('12345')

    expect(wrapper.html()).toContain(`Password must be at least ${minLength} characters`)
  })

  // Case 3: 當 showError 為 false 時，不顯示錯誤訊息。
  test('not renders an error if showError is false ', async () => {
    await wrapper.get('[data-test="password"]').setValue('12345')

    expect(wrapper.html()).toContain(`Password must be at least ${minLength} characters`)

    await wrapper.setProps({ showError: false })

    expect(wrapper.find('[data-test="errorMsg"]').exists()).toBe(false)
  })
})

語法說明：

• beforeEach() : 在每一個 test() 執行前運行的一個函式，常會用來初始化 wrapper 。
• setProps(): 在 wrapper 生成後，動態的改變 props 的值。

參考資料

• Pass Data to components | Vue Test Utils for Vue 3 (2.0.0-rc.15)
• Testing Props | Vue Testing Handbook
• Test Computed Properties and Watchers in Vue.js Components with Jest

今天的分享就到這邊，如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章，如果對內容有任何疑問，或是文章內容有錯誤，都非常歡迎留言討論或指教的！

明天要來分享的是 Vue3 單元測試 (Unit Testing) 主題的第七篇 Testing Vuex ，那我們明天見！